<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Circle节点分组</title>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      /**
       * 该案例演示以下功能：
       *  1、渲染群组所需要的数据结构；
       *  2、如何拖动一个群组；
       *  3、将节点从群组中拖出；
       *  4、将节点拖入到某个群组中；
       *  5、拖出拖入节点后动态改变群组大小。
       */
      G6.registerNode(
        'circleNode',
        {
          drawShape(cfg, group) {
            const keyShape = group.addShape('circle', {
              attrs: {
                x: 0,
                y: 0,
                r: 30,
                fill: '#87e8de',
              },
            });

            return keyShape;
          },
        },
        'circle',
      );

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 600,
        defaultNode: {
          shape: 'circleNode',
        },
        defaultEdge: {
          color: '#bae7ff',
        },
        modes: {
          default: ['drag-canvas', 'drag-group', 'drag-node-with-group', 'collapse-expand-group'],
        },
      });

      const oneNodes = [];
      for (let i = 0; i < 50; i++) {
        oneNodes.push({
          id: `node-1-${i}`,
          groupId: 'group3',
          label: `node-1-${i}-group3`,
          x: 100 + 5 * i,
          y: 300 + 5 * i,
          shape: 'circle',
        });
      }

      const data = {
        nodes: [
          // ...oneNodes,
          {
            id: 'node6',
            groupId: 'group3',
            label: 'node6-group3',
            x: 100,
            y: 300,
            shape: 'rect',
          },
          {
            id: 'node6-1',
            groupId: 'group3',
            label: 'node6-group3-1',
            x: 110,
            y: 300,
            shape: 'rect',
          },
          {
            id: 'node6-2',
            groupId: 'group3',
            label: 'node6-group3-2',
            x: 120,
            y: 300,
            shape: 'rect',
          },
          {
            id: 'node6-3',
            groupId: 'group3',
            label: 'node6-group3-3',
            x: 140,
            y: 300,
            shape: 'rect',
          },
          {
            id: 'node6-4',
            groupId: 'group3',
            label: 'node6-group3-4',
            x: 150,
            y: 300,
            shape: 'rect',
          },
          {
            id: 'node6-5',
            groupId: 'group3',
            label: 'node6-group3-5',
            x: 160,
            y: 300,
            shape: 'rect',
          },
          {
            id: 'node1',
            label: 'node1-group1',
            groupId: 'group1',
            x: 100,
            y: 100,
          },
          {
            id: 'node9',
            label: 'node9-p1',
            groupId: 'p1',
            x: 300,
            y: 210,
          },
          {
            id: 'node2',
            label: 'node2-group2',
            groupId: 'group1',
            x: 150,
            y: 200,
          },
          {
            id: 'node3',
            label: 'node3-group2',
            groupId: 'group2',
            x: 300,
            y: 100,
          },
          {
            id: 'node7',
            groupId: 'p1',
            label: 'node7-p1',
            x: 200,
            y: 200,
          },
          {
            id: 'node10',
            label: 'node10-p2',
            groupId: 'p2',
            x: 300,
            y: 210,
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
          },
          {
            source: 'node2',
            target: 'node3',
          },
          {
            source: 'node1',
            target: 'node3',
          },
          {
            source: 'node6',
            target: 'node1',
          },
        ],
        groups: [
          {
            id: 'group1',
            title: {
              text: '我的群组1',
              stroke: '#444',
              offsetX: -20,
              offsetY: 30,
            },
            parentId: 'p1',
          },
          {
            id: 'group2',
            title: '2',
            parentId: 'p1',
          },
          {
            id: 'group3',
            title: {
              text: '群组2',
              stroke: '#444',
              offsetX: -20,
              offsetY: 30,
            },
            parentId: 'p2',
          },
          {
            id: 'p1',
            title: '3',
          },
          {
            id: 'p2',
            title: '3',
          },
        ],
      };

      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
